<template>
  <div class="unity" v-if="dramaList.Datas&&zoneList">
    <div class="dramaList">
      <Drama
        v-for="drama in dramaList.Datas.slice(0,3)"
        :key="drama.id"
        :drama="drama"
      ></Drama>
    </div>
    <div class="searchMore">
      <span>查看更多（{{dramaList.pagination.count}}）</span>
    </div>
    <div class="zoneList">
      <ZoneItem
        v-for="zone in zoneList.Datas"
        :key='zone.id'
        :item="zone"
      ></ZoneItem>
    </div>
  </div>
  <ThumbnailLoading v-else></ThumbnailLoading>
</template>

<script>
import ThumbnailLoading from "components/public/ThumbnailLoading"
import Drama from "components/search/Drama"
import ZoneItem from "components/catalogList/ZoneItem"
import { get } from "util/http"
export default {
  props:['zoneList'],
  data(){
    return {
      dramaList:{}
    }
  },
  components:{
    Drama,
    ZoneItem,
    ThumbnailLoading
  },
  async mounted(){
    let keyword=this.$route.params.keyword
    let drama_result=await get({
      url:"/ajax/dramaapi/search",
      params:{
        s:keyword,
        p:1
      }
    })
    this.dramaList=drama_result.info
    
  }
}
</script>

<style lang="stylus" scoped>
.unity
  .searchMore
    margin-bottom .1rem
    color #c62828
    font-size .14rem
    position relative
    z-index 1
    text-align center
    >span 
      text-align center
      padding 0 0.05rem
      background-color #f5f5f5
    &:before
      content ""
      display block
      position absolute
      top 0
      right 0
      left 0
      bottom 0
      height 0
      margin auto
      border-bottom 1px solid #e0e0e0
      z-index -1
</style>